<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>配置服务器环境，手动封装ajax兼容性写法</title>
</head>

<body>
    <div>
        <button id="btn">点击发送ajaxGet请求</button>
        <div>
            <input id="iuser" type="text" name="username" placeholder="请输入username">
            <input id="iage" type="text" name="age" placeholder="请输入age">
        </div>
        <button id="btn1">点击发送ajaxPost请求</button>
        <ul id="ul">
        </ul>
    </div>
    <script>
        /*
            1.浏览器
            2.ajax对象
            3.ajax.open(method,url,true);规定发送请求的格式，请求的地址，是否异步
            4.ajax.send();发送出去
    
            5.onreadystatechange 监听数据状态 用readyState的值来监听0代表未初始化，未调用send()方法，2代表已读取，send方法执行完成，接收到全部响应内容，3代表交互中，正在解析响应内容，4代表完成，响应内容解析完成
            
    
            6.status 服务器返回的状态码，404代表文件未找到 200代表成功 500代表服务器内部错误 304 资源未被修改
        */
        function ajaxGetFunction(callback) {
            var xhr = null;
            //兼容AJAX对象
            if (window.XMLHttpRequest) {//主流浏览器都有这个方法
                xhr = new XMLHttpRequest();
            } else {//兼容IE及其他浏览器
                xhr = new ActiveXObject('Microsoft.XMLHttp');
            }
            xhr.open('get', './getNews.php', true);
            xhr.send();
            xhr.onreadystatechange = function () {
                console.log(xhr.readyState)
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        //重点！！回调函数！
                        callback(xhr.responseText)
                    }
                }
            }
        }
        function ajaxPostFunction(callback) {
            var xhr = null;
            //兼容AJAX对象
            if (window.XMLHttpRequest) {//主流浏览器都有这个方法
                xhr = new XMLHttpRequest();
            } else {//兼容IE及其他浏览器
                xhr = new ActiveXObject('Microsoft.XMLHttp');
            }
            xhr.open('POST', './post.php', true);
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');//请求头，传值的时候用什么编码格式 一般用application
            //发送post请求是在send()里面写入的
            xhr.send('username=laowang&age=18');
            xhr.onreadystatechange = function () {
                console.log(xhr.readyState)
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        //重点！！回调函数！
                        callback(xhr.responseText)
                    }
                }
            }
        }
       
        //↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓重点重点重点重点重点重点重点重点重点重点↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
        //↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓重点重点重点重点重点重点重点重点重点重点↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
        //↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓重点重点重点重点重点重点重点重点重点重点↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
          /**
         *
         * @param type 发送请求类型 （POST or GET）
         * @param url 接口的地址
         * @param data 接口的参数 （如果?name=老王）
         * @param callback 回调函数 (执行哪一个方法)
         * @param flag 是否是异步请求，一般情况都是开启异步 (boolean值)true
         */
        function ajaxFn(type,url,data,callback,flag) {
            var xhr = null;
            //兼容AJAX对象
            if (window.XMLHttpRequest) {//主流浏览器都有这个方法
                xhr = new XMLHttpRequest();
            } else {//兼容IE及其他浏览器
                xhr = new ActiveXObject('Microsoft.XMLHttp');
            }
            //因为传入的值必须是大写(GET 不能get)所以用toUpperCase转成大学
            type = type.toUpperCase();
            if (type == 'GET') {
                // xhr.open('GET', './getNews.php?username=laowang&age=18', true);
                xhr.open(type, url+'?'+data, flag);
                xhr.send();
            } else if (type == 'POST') {
                // xhr.open('POST', './post.php', true);
                xhr.open(type, url, flag);
                xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');//请求头，传值的时候用什么编码格式 一般用application
                //发送post请求是在send()里面写入的
                // xhr.send('username=laowang&age=18');
                xhr.send(data);
            }

            xhr.onreadystatechange = function () {
                console.log(xhr.readyState)
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        //重点！！回调函数！
                        callback(xhr.responseText)
                    }
                }
            }
        }
        //↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑重点重点重点重点重点重点重点重点重点重点↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
        //↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑重点重点重点重点重点重点重点重点重点重点↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
        //↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑重点重点重点重点重点重点重点重点重点重点↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
        btn.onclick = function () {
            // ajaxGetFunction(showList);
            ajaxFn('GET','./getNews.php','',showList,true)
        }
        
        btn1.onclick = function () {
            var data = 'username='+iuser.value+'&age='+iage.value;
            // ajaxPostFunction(showPerson);
            ajaxFn('POST','./post.php',data,showPerson,true)
        }
        // sub.onclick = function(e){
        //     e.preventDefault();
        //     ajaxFn('POST','./post','username=laowang&age=20',showPerson,true)
        // }
        function showList(data) {
            var value = JSON.parse(data);
            var str = '';
            value.forEach((element, index) => {
                str += '<li>' + element.title + '-' + element.date + '</li>'
            });
            var oUl = document.getElementById('ul');
            ul.innerHTML = str;
            oUl.innerHTML = str;
        }
         
        function showPerson(data) {
            alert(data);
        }
    </script>
</body>

</html>